<script>
	import { getContext } from 'svelte';
	const ctx = getContext('iconCtx') ?? {};
	let className = ctx.class || '';
	export { className as class };
	export let size = ctx.size || '24';
	export let role = ctx.role || 'img';
	export let color = ctx.color || 'currentColor';
	export let withEvents = ctx.withEvents || false;
	export let ariaLabel = 'mirror logo';
	export let title = {
		id: `mirror-logo-title-${Math.random().toString(36).substring(7)}`,
		title: ariaLabel
	};
	export let desc = {
		id: `mirror-logo-desc-${Math.random().toString(36).substring(7)}`,
		desc: 'A mirror logo icon'
	};
	let ariaDescribedby = `${title.id || ''} ${desc.id || ''}`;
	let hasDescription = false;
	$: if (title.id || desc.id) {
		hasDescription = true;
	} else {
		hasDescription = false;
	}
</script>

{#if withEvents}
	<svg
		xmlns="http://www.w3.org/2000/svg"
		{...$$restProps}
		{role}
		width={size}
		height={size}
		class={className}
		aria-label={ariaLabel}
		aria-describedby={hasDescription ? ariaDescribedby : undefined}
		viewBox="0 0 24 32"
		on:click
		on:keydown
		on:keyup
		on:focus
		on:blur
		on:mouseenter
		on:mouseleave
		on:mouseover
		on:mouseout
	>
		{#if title.id && title.title}
			<title id={title.id}>{title.title}</title>
		{/if}
		{#if desc.id && desc.desc}
			<desc id={desc.id}>{desc.desc}</desc>
		{/if}

		<mask
			id="mask0_356_1412"
			style="mask-type:luminance"
			maskUnits="userSpaceOnUse"
			x="0"
			y="0"
			width="24"
			height="32"
		>
			<path d="M23.8462 0.275391H0V31.1351H23.8462V0.275391Z" fill="white" />
		</mask>
		<g mask="url(#mask0_356_1412)">
			<path
				d="M23.2482 0.94043H0.939453V30.7546H23.2482V0.94043Z"
				fill="url(#pattern0_356_1412)"
				fill-opacity="0.5"
			/>
			<path
				d="M11.9225 1.06735C17.735 1.06735 23.0298 6.41457 23.0298 12.2833L22.8352 30.1157L22.4462 29.7228L23.8155 31.1055V12.2852C23.8147 7.42843 20.9174 3.05012 16.4739 1.19123C12.0304 -0.667657 6.91552 0.358803 3.5136 3.79213C2.86893 4.44285 2.29985 5.16568 1.81738 5.94661L2.44679 6.58218C4.2682 3.41446 8.03368 1.06735 11.9225 1.06735Z"
				fill={color}
			/>
			<path
				d="M0.02835 31.1071H23.8162L22.8356 30.1173H1.00886V12.2849C1.00886 10.3423 1.54478 8.14861 2.44591 6.58186L1.81587 5.94629C0.642001 7.84784 0.0221892 10.0448 0.027376 12.2856L0.02835 31.1071Z"
				fill={color}
			/>
		</g>
		<defs>
			<pattern id="pattern0_356_1412" patternContentUnits="objectBoundingBox" width="1" height="1">
				<use xlink:href="#image0_356_1412" transform="scale(0.00140647 0.0010627)" />
			</pattern>
			<image
				id="image0_356_1412"
				width="711"
				height="941"
				xlink:href=""
			/>
		</defs>
	</svg>
{:else}
	<svg
		xmlns="http://www.w3.org/2000/svg"
		{...$$restProps}
		{role}
		width={size}
		height={size}
		class={className}
		aria-label={ariaLabel}
		aria-describedby={hasDescription ? ariaDescribedby : undefined}
		viewBox="0 0 24 32"
	>
		{#if title.id && title.title}
			<title id={title.id}>{title.title}</title>
		{/if}
		{#if desc.id && desc.desc}
			<desc id={desc.id}>{desc.desc}</desc>
		{/if}

		<mask
			id="mask0_356_1412"
			style="mask-type:luminance"
			maskUnits="userSpaceOnUse"
			x="0"
			y="0"
			width="24"
			height="32"
		>
			<path d="M23.8462 0.275391H0V31.1351H23.8462V0.275391Z" fill="white" />
		</mask>
		<g mask="url(#mask0_356_1412)">
			<path
				d="M23.2482 0.94043H0.939453V30.7546H23.2482V0.94043Z"
				fill="url(#pattern0_356_1412)"
				fill-opacity="0.5"
			/>
			<path
				d="M11.9225 1.06735C17.735 1.06735 23.0298 6.41457 23.0298 12.2833L22.8352 30.1157L22.4462 29.7228L23.8155 31.1055V12.2852C23.8147 7.42843 20.9174 3.05012 16.4739 1.19123C12.0304 -0.667657 6.91552 0.358803 3.5136 3.79213C2.86893 4.44285 2.29985 5.16568 1.81738 5.94661L2.44679 6.58218C4.2682 3.41446 8.03368 1.06735 11.9225 1.06735Z"
				fill={color}
			/>
			<path
				d="M0.02835 31.1071H23.8162L22.8356 30.1173H1.00886V12.2849C1.00886 10.3423 1.54478 8.14861 2.44591 6.58186L1.81587 5.94629C0.642001 7.84784 0.0221892 10.0448 0.027376 12.2856L0.02835 31.1071Z"
				fill={color}
			/>
		</g>
		<defs>
			<pattern id="pattern0_356_1412" patternContentUnits="objectBoundingBox" width="1" height="1">
				<use xlink:href="#image0_356_1412" transform="scale(0.00140647 0.0010627)" />
			</pattern>
			<image
				id="image0_356_1412"
				width="711"
				height="941"
				xlink:href=""
			/>
		</defs>
	</svg>
{/if}
